<!doctype html>
<html lang="en" dir="ltr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta http-equiv="Content-Language" content="en" />
    <meta name="msapplication-TileColor" content="#2d89ef">
    <meta name="theme-color" content="#4188c9">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />

    <title>图片社交网站</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
	<!-- 新 Bootstrap 核心 CSS 文件 -->
	<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	
	<script src="./masonry.pkgd.js"></script>
	<script src="./imagesloaded.pkgd.js"></script>


    <link href="./assets/css/c.css" rel="stylesheet"  type="text/css"/>
	<link href="./style.css" rel="stylesheet"  type="text/css"/>
    <!-- Dashboard Core -->
    <link href="./assets/css/dashboard.css" rel="stylesheet" />
    <!--script src="./assets/js/dashboard.js"></script-->
    <!-- c3.js Charts Plugin -->
    <link href="./assets/plugins/charts-c3/plugin.css" rel="stylesheet" />
    <!--script src="./assets/plugins/charts-c3/plugin.js"></script-->
    <!-- Google Maps Plugin -->
    <link href="./assets/plugins/maps-google/plugin.css" rel="stylesheet" />
    <!--script src="./assets/plugins/maps-google/plugin.js"></script-->
    <!-- Input Mask Plugin -->
    <!--script src="./assets/plugins/input-mask/plugin.js"></script-->
</head>
<body class="">
<div class="page">
<div class="page-main">
<div class="header py-4">
    <div class="container">
        <div class="d-flex">
            <a class="header-brand yz" href="./index">
                <img src="./p/brand.png" class="header-brand-img">图片社交网站
            </a>
            <div class="d-flex order-lg-2 ml-auto user-div">
                <a href="#" class="nav-link pr-0 leading-none user-a" data-toggle="modal" data-target="#LoginModal"><!-- 账户信息 -->
                    <span class="avatar" style="background-image: url(./p/faces/lh.jpg)"></span>
                    <span class="ml-2 d-none d-lg-block">
                         <span class="text-default">未登录</span>
                         <small class="text-muted d-block mt-1">点击登录</small>
                    </span>
                </a>
            </div>
        </div>
    </div>
</div>
<div class="header collapse d-lg-flex p-0" id="headerMenuCollapse">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg order-lg-first">
                <ul class="nav nav-tabs border-0 flex-column flex-lg-row"> <!-- 导航栏 -->
                    <li class="nav-item">
                        <a href="./index" class="nav-link"><i class="fe fe-home"></i> 主页</a>
                    </li>
                    <li class="nav-item">
                        <a href="./latest" class="nav-link"><i class="fe fe-arrow-up-circle"></i> 最新</a>
                    </li>
                    <li class="nav-item">
                        <a href="./trend" class="nav-link active"><i class="fe fe-thumbs-up"></i> 人气</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
            <div class="modal fade" id="LoginModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			    <div class="row">
			      <div class="col col-login mx-auto bcw">
			        <div class="text-center mb-6">
			          <img src="./assets/brand/tabler.svg" class="h-6" alt="">
			        </div>
					<div class="register-tab" style="width:100%;display:table;background-color:#fff;border:1px solid rgba(0, 40, 100, 0.12);border-radius:3px;padding-left: 16px;padding-right:16px;">
						<div class="register-tab-item" style="padding: 16px;float:left;display:table-cell;"><a href="#login-content" tabindex="-1" data-toggle="tab">登录</a></div>
						<div class="register-tab-item" style="padding: 16px;float:left;display:table-cell;"><a href="#register-content" tabindex="-1" data-toggle="tab">注册</a></div>
						<div style="padding: 16px;float:right;display:table-cell;">
						    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
						</div>
					</div>
					<div id="myTabContent" class="tab-content">
						<div class="tab-pane fade in active" id="login-content">
						<form class="card" action="" method="post">
						  <div class="card-body p-6">
							
						    <div class="card-title">登录</div>
							
						    <div class="form-group">
						      <label class="form-label">用户名</label>
						      <input type="text" class="form-control" id="login_username" aria-describedby="emailHelp" placeholder="account">
						    </div>
						    <div class="form-group">
						      <label class="form-label">
						        密码
						        <a href="./forgot-password.html" class="float-right small">忘记密码</a>
						      </label>
						      <input type="password" class="form-control" id="login_password" placeholder="Password">
						    </div>
						    <div class="form-group">
						      <label class="custom-control custom-checkbox">
						        <input type="checkbox" class="custom-control-input" />
						        <span class="custom-control-label">记住账号</span>
						      </label>
						    </div>
						    <div class="form-footer">
						      <button type="button" class="btn btn-primary btn-block" onclick="login()">登录</button>
						    </div>
						  </div>
						</form>
						</div>
						<div class="tab-pane fade in" id="register-content">
							<form class="card" id="registerform">
							  <div class="card-body p-6">
							    <div class="card-title">创建新账户</div>
							    <div class="form-group">
							      <label class="form-label">用户名</label>
							      <input type="text" class="form-control" id="user_name" placeholder="用户名">
							    </div>
								
								<div class="form-group">
								  <label class="form-label">邮箱</label>
								  <input type="email" class="form-control" id="email" placeholder="邮箱">
								</div>
							
							    <div class="form-group">
							      <label class="form-label">密码</label>
							      <input type="password" class="form-control" id="input_password" placeholder="密码">
							    </div>
								
								<div class="form-group">
								  <label class="form-label">确认密码</label>
								  <input type="password" class="form-control" id="comfirm_password" placeholder="确认密码">
								</div>
					
							    <div class="form-footer">
							      <button class="btn btn-primary btn-block" type="button" onclick="register();">创建</button>
							    </div>
							  </div>
							</form>
						</div>
			        </div>
			      </div>
			    </div>
			</div>
<div class="my-3 my-md-5">
	<div class="container">
		<!--瀑布流-->
		<div class="grid"></div>
	</div>
</div>
</div>
</div>
<div style="text-align: -webkit-center;display:none;" id="reach-bottom">
	   <img style="max-width:150px;" src="./pic/bottom.png">
<div>
<div class="footer">
    <div class="container">
        <div class="row">
            <div class="col-lg-4 mt-4 mt-lg-0">
                其它类似网站<br>Similar Websites
            </div>
            <div class="col-lg-8">
                <div class="row">
                    <div class="col-6 col-md-3">
                        <ul class="list-unstyled mb-0">
                            <li><a href="https://huaban.com/discovery/">花瓣网</a></li>
                            <li><a href="https://tuchong.com/">图虫</a></li>
                        </ul>
                    </div>
                    <div class="col-6 col-md-3">
                        <ul class="list-unstyled mb-0">
                            <li><a href="https://www.mihuashi.com/artworks">米画师</a></li>
                            <li><a href="https://bcy.net/illust/toppost100">半次元</a></li>
                        </ul>
                    </div>
                    <div class="col-6 col-md-3">
                        <ul class="list-unstyled mb-0">
                            <li><a href="http://www.lofter.com/">Lofter</a></li>
                            <li><a href="https://pixabay.com/">pixabay</a></li>
                        </ul>
                    </div>
                    <div class="col-6 col-md-3">
                        <ul class="list-unstyled mb-0">
                            <li><a href="http://artand.cn/works">Artand</a></li>
                            <li><a href="http://www.poco.cn/works/works_list?classify_type=0&works_type=editor">POCO</a></li>
                        </ul>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
<footer class="footer">
    <div class="container">
        <div class="row align-items-center flex-row-reverse">
            <div class="col-auto ml-lg-auto">
                <div class="row align-items-center">
                    <div class="col-auto">
                        <ul class="list-inline list-inline-dots mb-0">
                            <li class="list-inline-item"><a href="./docs/index.html">Documentation</a></li>
                            <li class="list-inline-item"><a href="./faq.html">FAQ</a></li>
                        </ul>
                    </div>
                    <div class="col-auto">
                        <a href="https://github.com/tabler/tabler" class="btn btn-outline-primary btn-sm">Source code</a>
                    </div>
                </div>
            </div>
            <div class="col-12 col-lg-auto mt-3 mt-lg-0 text-center">
                一个以图片为主要内容的社交网站  By Group 4.
            </div>
        </div>
    </div>
</footer>
</div>
    <script type="text/template" id="user-info">
		<div class="d-flex order-lg-2 ml-auto user-info">

		   <div class="dropdown">
		       <a href="#" class="nav-link pr-0 leading-none" data-toggle="dropdown"><!-- 账户信息 -->
		           <span class="avatar" style="background-image: url(./p/faces/lh.jpg)" id="userimg"></span>
		       <span class="ml-2 d-none d-lg-block">
		         <span class="text-default" id="username">李华</span>
		         <small class="text-muted d-block mt-1" id="UID">Administrator</small>
		       </span>
		       </a>
		       <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow"> <!-- 下拉框 -->
		           <a class="dropdown-item" href="profile.html">
		               <i class="dropdown-icon fe fe-user"></i> 个人信息
		           </a>
		           <a class="dropdown-item" href="#">
		               <i class="dropdown-icon fe fe-star"></i> 我的关注
		           </a>
		           <a class="dropdown-item" href="#">
		               <i class="dropdown-icon fe fe-thumbs-up"></i> 点赞记录
		           </a>
		           <a class="dropdown-item" href="upload" target="_blank">
		               <i class="dropdown-icon fe fe-upload"></i> 图片上传
		           </a>
		           <a class="dropdown-item" href="#">
		               <i class="dropdown-icon fe fe-settings"></i> 设置
		           </a>
		           <a class="dropdown-item" href="#">
		               <i class="dropdown-icon fe fe-send"></i> 消息
		           </a>
		           <div class="dropdown-divider"></div>
		           <a class="dropdown-item" href="#">
		               <i class="dropdown-icon fe fe-help-circle"></i> 帮助
		           </a>
		           <a class="dropdown-item" onclick="logout();">
		               <i class="dropdown-icon fe fe-log-out"></i> 退出
		           </a>
		       </div>
		   </div>
		</div>
	</script>
	<script type="text/template" id="no-user">
		<a href="#" class="nav-link pr-0 leading-none" data-toggle="modal" data-target="#LoginModal"><!-- 账户信息 -->
		    <span class="avatar" style="background-image: url(./p/faces/lh.jpg)"></span>
		    <span class="ml-2 d-none d-lg-block">
		         <span class="text-default">未登录</span>
		         <small class="text-muted d-block mt-1">点击登录</small>
		    </span>
		</a>
	</script>
<script type="text/text/template" id="waterfall-item">
	<div class="grid-item ani">
	    <a href="javascript:void(0)" target="_blank" class="a-img">
			<img class="show-img">
		</a>
		<div class="d-flex align-items-center px-2 bc-white">
			<a href="javascript:void(0)" target="_blank" class="a-author">
				<div class="avatar avatar-md mr-3 author-img" style="background-image: url(p/faces/male/4.jpg)"></div>
			</a>
		    <div class="p10">
				<a href="javascript:void(0)" target="_blank" class="a-author">
					<div class="author-name"></div>
				</a>
		        <small class="d-block text-muted upload-time">6 天前</small>
		    </div>
		    <div class="div-float">
		    	<button class="btn btn-favor" onclick="like(this);">
					<a class="icon d-none d-md-inline-block ml-3 ">
						<i class="fe fe-heart mr-1"></i> <span class="favor-num">90</span></a>
				</button>
		    </div>
		</div>
	</div>
</script>	
<script>
			isLogin();
			var order = 0;
			var isover = false;
			var grid = $('.grid').masonry({
			  // options
			  itemSelector: '.grid-item',
			  columnWidth: 225,
			  gutter: 10,
			  originLeft: true,
			  resize: true
			});
			/*var img1 = createImgShow("./pic/top1.jpg");
			//console.log(img1);
			//grid.masonry('appended',img1);
			grid.append( img1 ).masonry('appended', img1 );*/
			
			getWaterfallPic();
			
			grid.imagesLoaded().progress( function() {
			    grid.masonry('layout');
			});
			
			function like(el)
			{
				var el = $(el);
				let tweet_id = el.data("img_id");
				$.ajax({
							method: "GET",
							url: "/api/favor?"+'tweet_id=' + tweet_id,
							dataType: "json",
							contentType: "application/json",
						}).done(function(result) {	
							   if(result['status'] === 0)
							   {
								  let favor = el.find('.favor-num');
								  let num = favor.text();
								  num = parseInt(num) + 1;
								  //console.log(num);
								  favor.text(num);
							   }
							   if(result['status'] === 3)
							   {
								  let favor = el.find('.favor-num');
								  let num = favor.text();
								  num = parseInt(num) - 1;
								  //console.log(num);
								  favor.text(num);
							   }
								   alert(result['info']);
						}).fail(function(result) {
				              alert("点赞失败，请刷新网站");
						});
			}
				
			function isLogin()
			{
				$.ajax({
					method: "GET",
					url: "/islogin",
					dataType: "json",
					contentType: "application/json",
				}).done(function(result) {	
				    if(result.status === "0")
					{
						console.log('已登录');
						let userinfo = document.getElementById('user-info');
						let user = $($(userinfo).html());
						var nouser = $('.user-a');
						nouser.remove();
						var parent = $('.user-div');
						let user_name = user.find('#username');
						let user_id = user.find('#UID');
						let user_img = user.find('#userimg');
						user_name.text(result.user_name);
						user_id.text(result.user_id);
						user_img.css("background-image","url(" + result.user_img + ")");
						parent.append(user);
					}
					else
					{
						console.log('未登录');
					}
				}).fail(function(result) {
				    alert("尝试登陆失败，请刷新网站");
					});
				}
			
			function createImgShow(src)
			{
				var div = $(document.createElement('div'));
				var img = $(document.createElement('img'));
				div.addClass("grid-item");
				img.addClass("show-img");
				img.attr("src",src);
				
				div.append(img);
				console.log(img);
				return div;
			}
			
			function getWaterfallPic()
			{
				var imgs;
				$.ajax({
							method: "POST",
							url: "/hotpic/" + order,
							dataType: "json",
							contentType: "application/json",
						}).done(function(result) {	
							console.log(result);
							if(result['status'] == '0')
							{
								imgs=result['imgs'];
								appendtoWF(imgs);
								//date = result[result.length]
							}
						}).fail(function(result) {
				              alert("获取图片失败，请刷新网站");
						});
			}
			
			function appendtoWF(imgs)
			{
				let org = document.getElementById('waterfall-item');
				for(let i = 0; i<imgs.length; i++)
				{
					var node = $(org.cloneNode(true)).html();
					var parent = $('.grid')
					var pic = $(node);
					let author_img = pic.find('.author-img');
					let img = pic.find('.show-img');
					let author_name = pic.find('.author-name');
					let time = pic.find('.upload-time');
					let favor = pic.find('.favor-num');
					let a_img = pic.find('.a-img');
					let a_author = pic.find('.a-author');
					let btn_favor = pic.find('.btn-favor');
					let num = 9999;
					
					img.attr('src',imgs[i]['imgaddr']);
					author_img.css('background-image','url(' + imgs[i]['userimg'] + ')');
					author_name.text(imgs[i]['username']);
					//console.log(author_name);
					time.text(get_time_diff(parseInt(imgs[i]['time'])));
					//console.log(favor);
					favor.text(imgs[i]['favor']);
					btn_favor.data('img_id',imgs[i]['tweet_id']);
					a_img.attr('href','./seepicinfo/' + imgs[i]['tweet_id']);
				    a_author.attr('href','./seeauthorinfo/' + imgs[i]['user_id']);
					//console.log(img);
					grid.append(pic).masonry('appended', pic);
			    }
				grid.imagesLoaded().progress( function() {
				    grid.masonry('layout');
				});
				order = order + 20;
				if(imgs.length < 20)
				{
					isover = true;
					let bottom = document.getElementById('reach-bottom');
					bottom.style.display='block';
				}
			}
			
			function addOne(){
				var btn=$(event.currentTarget);
				//console.log(btn);
				var text = btn.find('.favor-num')
				//console.log(text);
				var num = text.context.innerText;
				num = parseInt(num) + 1;
				//console.log(num);
				text.text(num);
				//console.log(btn.context.innerText);
			}
			function login(){
			    var parameters = {};
			    			
			    parameters["user_name"] = $('#login_username').val();
			    parameters["password"] = $('#login_password').val();
				//$('#LoginModal').modal('hide');
				//console.log($('#LoginModal'));
				var data= {
				    data: JSON.stringify(parameters),
				};
				$.ajax({
					method: "POST",
					url: "/login",
					dataType: "json",
					data: data,
					}).done(function(result) {
						console.log(result);
						console.log(result.status);
						if(result.status === '0')
						{
							console.log('login ok');
							$('#LoginModal').modal('hide');
							let userinfo = document.getElementById('user-info');
							let user = $($(userinfo).html());
							var nouser = $('.user-a');
							nouser.remove();
							var parent = $('.user-div');
							let user_name = user.find('#username');
							let user_id = user.find('#UID');
							let user_img = user.find('#userimg');
							user_img.css("background-image","url(" + result.user_img + ")");
							user_name.text($('#login_username').val());
							user_id.text(result.user_id);
							parent.append(user);	
						}
					}).fail(function(result) {
						alert("登录失败，请重试");
				});
			};
			function logout()
			{
				$.ajax({
					method: "POST",
					url: "/logout",
					dataType: "json",
					}).done(function(result) {
						console.log(result);
						if(result.status === '0')
						{
							let nouser = document.getElementById('no-user');
							let user = $($(nouser).html());
							console.log(user);
							var userinfo = $('.user-info');
							console.log(userinfo);
							userinfo.remove();
							var parent = $('.user-div');
							parent.append(user);
						}
					}).fail(function(result) {
						alert("登出失败，请重试");
				});
			}
			
			function get_time_diff(time) {
			    var diff = '';
			    var time_diff = Math.floor(new Date().getTime()/1000) - time;
			    // 计算相差天数  
			    var days = Math.floor(time_diff / (24 * 3600));
			    if (days > 0) {
			        diff += days + '天前';
					return diff;
			    }
			    // 计算相差小时数  
			    var leave1 = time_diff % ( 24 * 3600); 
			    var hours = Math.floor(leave1 / (3600));
			    if (hours > 0) {
			       return hours + '小时前';
			    } 
			    // 计算相差分钟数  
			    var leave2 =leave1 % (3600);
			    var minutes = Math.floor(leave2 / (60));
			    if (minutes > 0) {
			        return minutes + '分钟前';
			    }
			    // 计算相差秒数  
			    var leave3 = leave2%(60);
			    var seconds = Math.round(leave3);
			    if (seconds > 0) {
			       return seconds + '秒前';
			    } 
			    
			    return '刚刚';
			}
			
			$(window).scroll(function(){
			　　var scrollTop = $(this).scrollTop();
			　　var scrollHeight = $(document).height();
			　　var windowHeight = $(this).height();
			    //console.log(scrollTop + "-" + windowHeight+ "-" + scrollHeight);
			　　if(scrollTop + windowHeight > scrollHeight - 5){
			　　　　getWaterfallPic();
			　　}
			});
</script>
</body>
</html><!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
